<template>
  <div class="user-info">
    <el-dropdown>
      <div class="user-info-inner">
        <el-avatar :size="36" :src="user.avatar" />
        <div class="user-details">
          <span class="username">{{ user.name }}</span>
          <span class="user-role">{{ user.role }}</span>
        </div>
        <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-icon><User /></el-icon>
            <span>个人中心</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-icon><Setting /></el-icon>
            <span>账号设置</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click="handleLogout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { service } from '@/common/axios/apiRequest';

//页面控件挂载完成后获取菜单数据
onMounted(async () => {
    // await service.post('api/User/GetAllUser').then(res => {        
    // })
});

const user = ref({
  name: '管理员',
  role: '超级管理员',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

const handleLogout = () => {
  console.log('退出登录')
}
</script>

<style scoped>
.user-info {
  margin-left: 20px;
}

.user-info-inner {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  transition: background-color 0.3s;
  border-radius: 4px;
}

.user-info-inner:hover {
  background-color: #f5f7fa;
}

.user-details {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  line-height: 1.4;
}

.username {
  font-size: 14px;
  font-weight: 500;
}

.user-role {
  font-size: 12px;
  color: #909399;
}

.dropdown-icon {
  margin-left: 5px;
  color: #909399;
  font-size: 12px;
}
</style>